<template>
  <div class="">
    <mYheader
      @isShowFlag="isShowFlag"
      @changeflag="changeflag"
      :flagTap="flagTap"
    ></mYheader>
    <lsitCard :item="v" v-for="(v, i) in newObj" :key="i"></lsitCard>
    <mYfooter
      :subtotal="subtotal"
      :num="num"
      @checkALL="checkALL"
      :flag="flag"
      :flagTap="flagTap"
      :trueLength="trueLength"
      @removecheck="removecheck"
    ></mYfooter>
    <div class="pop-up" v-if="isShow">
      <h4>筛选商品</h4>
      <div class="page">
        <p
          :class="indexTap == i ? 'active' : ''"
          @click="pushDate(v, i)"
          v-for="(v, i) in nameList"
          :key="i"
        >
          {{ v }}
        </p>
      </div>
      <button @click="isShowFlag">取消</button>
      <button @click="filterList">确定</button>
    </div>
  </div>
</template>

<script>
import mYheader from "../components/mYheader.vue";
import lsitCard from "@/components/lsitCard";
import mYfooter from "@/components/mYfooter";
import { useStore } from "vuex";
import { computed, watch, ref, reactive, toRefs, watchEffect } from "vue";
export default {
  setup(props) {
    let store = useStore();
    store.dispatch("getObj");
    let obj = computed(() => store.state.objList);
    let flag = ref(false);
    let num = ref(0);
    let subtotal = ref(0);
    let flagTap = ref(true);
    let nameList = ref(["海信", "海尔", "山水", "美的"]);
    let list = reactive({
      trueLength: 0,
      isShow: false,
      storage: "", // 存储的值
      indexTap: -1,
    });
    let newObj = ref({});
    let valve = ref(false);
    newObj.value = obj.value.data.cartData;

    function changeflag() {
      flagTap.value = !flagTap.value;
    }
    function checkALL(bool) {
      newObj.value.forEach((item) => {
        item.checked = bool;
      });
    }
    function removecheck() {
      newObj.value = obj.value.data.cartData.filter((item) => {
        return !item.checked;
      });
    }
    function isShowFlag() {
      list.isShow = !list.isShow;
    }
    function pushDate(v, i) {
      list.storage = v;
      if (!valve.value) {
        list.indexTap = i;
        valve.value = true;
      } else if (valve.value) {
        list.indexTap = -1;
        valve.value = false;
      }
    }

    function filterList() {
      newObj.value = obj.value.data.cartData.filter((item) => {
        return item.name.includes(list.storage);
      });
      console.log(newObj.value);
    }

    watch(
      () => obj,
      (data) => {
        store.commit("pushObj", data);
      },
      { deep: true }
    );
    watch(
      () => newObj.value,
      (data) => {
        flag.value = data.every((item) => item.checked);
        num.value = data.reduce((nums, item) => {
          return (nums += item.checked && item.num);
        }, 0);
        subtotal.value = data.reduce((nums, item) => {
          return (nums += item.checked && item.num * item.price);
        }, 0);
        list.trueLength = data.reduce((nums, item) => {
          return (nums += item.checked);
        }, 0);
        if (data.length == 0) {
          flag.value = false;
        }
      },
      { deep: true }
    );

    return {
      obj,
      flag,
      checkALL,
      num,
      subtotal,
      flagTap,
      changeflag,
      ...toRefs(list),
      removecheck,
      isShowFlag,
      nameList,
      pushDate,
      valve,
      filterList,
      newObj,
    };
  },
  components: { mYheader, mYfooter, lsitCard },
};
</script>

<style lang="scss" scoped>
.right {
  width: 50%;
  height: 100%;
  position: fixed;
  background-color: #fff;
  top: 0;
  right: 0;
}
.active {
  border: 2px solid rgb(33, 199, 228) !important;
}
u {
  margin: 10px;
  width: 50px;
  height: 30px;
  line-height: 30px;
  text-decoration: none;
  text-align: center;
  display: inline-block;

  background-color: #ccc;
}
.active {
  border: 2px solid rgb(23, 136, 201);
}
.pop-up {
  width: 60%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  background-color: #fff;
}
.page {
  display: flex;
  p {
    width: auto;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 1px 10px;
  }
}
</style>
